html,body {
    height:100%;
    margin: 0;
    padding: 0;
   overflow-y:visible ;
}
img { border: none;width: 100%;vertical-align: middle;display:block;}
p, form, input, button, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin: 0;padding: 0;color:black}
li, ol { list-style: none;}
a{ text-decoration: none;}
@media screen and (min-width: 320px) {html{font-size:106.6666%;}}
@media screen and (min-width: 360px) {html{font-size:120%;}}
@media screen and (min-width: 375px) {html{font-size:125%;}}
@media screen and (min-width: 400px) {html{font-size:133.3333%;}}
@media screen and (min-width: 414px) {html{font-size:138%;}}
@media screen and (min-width: 440px) {html{font-size:146.6666%;}}
@media screen and (min-width: 480px) {html{font-size:160%;}}
@media screen and (min-width: 520px) {html{font-size:173.3333%;}}
@media screen and (min-width: 560px) {html{font-size:186.6666%;}}
@media screen and (min-width: 600px) {html{font-size:200%;}}
@media screen and (min-width: 640px) {html{font-size:213.3333%;}}
@media screen and (min-width: 680px) {html{font-size:226.6666%;}}
@media screen and (min-width: 720px) {html{font-size:240%;}}
@media screen and (min-width: 760px) {html{font-size:253.3333%;}}
@media screen and (min-width: 800px) {html{font-size:266.6666%;}}
@media screen and (min-width: 960px) {html{font-size:320%;}}
@media screen and (min-width: 1200px) {html{font-size:400%;}}
@media screen and (min-width: 1200px) {html{font-size:426.6666%;}}
#container,.page{
    height:100%;
}
.page-1{
    overflow:hidden;
    background:url(../images/bg-img.png) no-repeat;
    background-size: 100% 100%;
}
.page-2 {
    overflow:hidden;
    background: url(../images/bj-1.png) no-repeat;
    background-size: 100% 100%;
}
.page-3 {
    overflow:hidden;
    background: url(../images/bg3.jpg) no-repeat;
    background-size: 100% 100%;
}
.page-4 {
    overflow:hidden;
    background: url(../images/bg4.jpg) no-repeat;
}
.page-5 {
    overflow:hidden;
    background: url(../images/bg5.jpg) no-repeat;
    background-size: 100% 100%;
}
.page-1  h1{
    padding-top: 1.5rem;
    text-align: center;
    font-size: 180%;
    text-shadow: -1px -1px 1px #fff,1px 1px 1px #fff;
      display:block;
    -webkit-transform: translate(0, -180%);
}
.page-1 ul {
    padding:1.6rem 2.0rem;
    font-size: 130%;
}
.page-1 ul li {
    padding:0.5rem 0;
}
/*格言初始状态*/
.page-1 .geyan {
     -webkit-transform: translateX(100%);
}
.page-1 .geyan p{
    font-size: 130%;
    color: #3aeec2;
}
.page-1 .geyan .rightP{
    position:absolute;
    right: 0;
}
/*基本信息动画*/
#jbxx {
    -webkit-animation: jbxx 1s 0.6s forwards;
}
@-webkit-keyframes jbxx {
    0%{
        -webkit-transform: translate(0, 30%);
    }
    15%{
        -webkit-transform: translate(0, -70%);
    }
    30%{
    -webkit-transform: translate(0, 25%);
    }
    50%{
    -webkit-transform: translate(0, -25%);
    }
    70%{
    -webkit-transform: translate(0, 10%);
    }
    85%{
    -webkit-transform: translate(0, -10%);
    }
    100%{
    -webkit-transform: translate(0, 0);
    }
}
/*格言动画控制*/
#geyan{
    -webkit-transition: all 0.8s  1s;
    -webkit-transform: translateX(0);
}
/*个人信息动画控制*/
#liUser li{
    -webkit-animation: liUser 0.6s  1.8s forwards;
}
@-webkit-keyframes liUser {
    0%{
        -webkit-transform: rotateX(0deg);
    }
    25%{
        -webkit-transform: rotateX(90deg);
    }
    50%{
       -webkit-transform: rotateX(0deg);
    }
    75%{
    -webkit-transform:  rotateX(-90deg);
    }
    100%{
    -webkit-transform:  rotateX(0deg);
    }
}
/*联系方式*/

.page-2 .header {
    text-align: center;
    padding-top: 1rem;
    font-size: 2rem;
    line-height: 2rem;
    color:blue;
     -webkit-transition: all 1.8s;
}
.page-2 #header{
     -webkit-transform-origin: 50% 50%;
     -webkit-transform:  rotateZ(720deg);
}
.box_border{
    width: 90%;
    height: 70%;
    margin:1rem auto;
    position:relative;
}
.page-2 .border_left,.page-2 .border_right{
    position:absolute;
    height: 85%;
    width: 1px;
    background:#fff;
    -webkit-transition: all 2s;
}
.page-2 .border_left{
    left: 10%;
    -webkit-transform: translateY(-325%);
}
.page-2 .border_right{
    right: 10%;
    -webkit-transform: translateY(325%);
}
.page-2 .border_top,.page-2 .border_bottom{
    position:absolute;
    height: 1px;
    width: 85%;
    -webkit-transition: all 2s;
    background:#fff;
}
.page-2 .border_top{
    top: 10%;
    -webkit-transform: translateX(225%);
}
.page-2  .border_bottom{
    bottom: 10%;
    -webkit-transform: translateX(-225%);
}
.page-2 #border_left,.page-2 #border_right{
    -webkit-transform: translateY(10%);
}
.page-2 #border_top,.page-2 #border_bottom{
    -webkit-transform: translateX(10%);
}
.page-2 .box_border .Telephone {
    width: 75%;
    height:70%;
    position:absolute;
    top: 13%;
    left:12%;
}
.page-2 .box_border .Telephone li{
        font-size: 100%;
        color:#ffffff;
        margin: 5px auto;
        width: 75%;
        height:32%;
        text-align: center;
        line-height: 5rem;
        background-color:rgba(100, 255, 255, 0.8);
}

#Telephone li {
    -webkit-transition: all 1s;
    background-color:rgba(100, 255, 255, 0.3);
}

.page-3 h1{
    display:block;
    width: 75%;
    margin:1rem auto;
    background:green;
      -webkit-transition: all 1.5s 0.3s;
}
.page-3 h1:nth-child(1){
      -webkit-transform: translate(-150px, 300px);
      -webkit-transform:  rotateZ(50deg);
}
.page-3 h1:nth-child(2){
      -webkit-transform: translate(180%, 290%);
      /*-webkit-transform:  rotateZ(-150deg);*/
}
.page-3 h1:nth-child(3){
      -webkit-transform: translate(-230%, -130%);
      /*-webkit-transform:  rotateZ(280deg);*/
}
.page-3 h1:nth-child(4){
      -webkit-transform: translate(-220%, 130%);
      /*-webkit-transform:  rotateZ(-632deg);*/
}
.page-3 h1:nth-child(5){
      -webkit-transform: translate(-180%, -100%);
      /*-webkit-transform:  rotateZ(381deg);*/
}
.page-3 h1:nth-child(6){
      -webkit-transform: translate(80%, 30%);
      /*-webkit-transform:  rotateZ(200deg);*/
}
.page-3 h1:nth-child(7){
      -webkit-transform: translate(-100%, -290%);
      /*-webkit-transform:  rotateZ(-100deg);*/
}
.page-3 h1:nth-child(8){
      -webkit-transform: translate(280%, 390%);
      /*-webkit-transform:  rotateZ(110deg);*/
}
#page-3 h1{
    /*-webkit-transform-origin: 0% 100%;*/
    -webkit-transform: translate(0, 0);
      -webkit-transform:  rotateZ(0);
}
/*第四屏*/
.page-4 .box{
    width:95%;
    height:70%;
    margin:5% auto;
    position:relative;
}
.page-4 .box p{
   overflow:hidden;
    position:absolute;
    left:50%;
    top:40%;
    width:30%;
    height:30%;
    background-color: rgba(122, 255, 200, 0.7);
    -webkit-transition:all 1s 0.5s linear;
    -webkit-transform-origin: 0% 100%;
}

#page-4 .box p:nth-child(1){
            -webkit-transform: rotate(60deg);
        }
#page-4 .box p:nth-child(2){
            -webkit-transform: rotate(120deg);
        }
#page-4 .box p:nth-child(3){
            -webkit-transform: rotate(180deg);
        }
#page-4 .box p:nth-child(4){
            -webkit-transform: rotate(240deg);
        }
 #page-4 .box p:nth-child(5){
            -webkit-transform: rotate(300deg);
        }
 #page-4 .box p:nth-child(6){
            -webkit-transform: rotate(360deg);
        }
/*第五屏*/
.page-5 .footr{
    height:100%;
    width:100%;
    position:relative;
    background-color: #000;
    -webkit-transform: translateY(-110%);
}
.page-5 .footr h3{
    width:100%;
    color:red;
    position:absolute;
    bottom:0;
    text-align: center;
}
#page-5 .footr{
     -webkit-transition: all 5s linear;
     -webkit-transform: translateY(0);
}